<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <n-space vertical :size="16" class="p-4">
        <div id="comprehensive-review-page"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12 leading-relaxed">

          <h1 class="text-xl font-bold text-center mb-6">关于{{ member.memberName }}同志的政审综合材料</h1>

          <p class="indent-8">
            {{ member.memberName }}，{{ member.genderType }}，{{ member.nationalityDesc }}，{{ member.birthPlace }}人，生于{{
              member.birthDate?.replaceAll('-', '年') }}月；学历{{ member.educationLevel || '高中' }}。{{
              member.joinLeagueDate?.replaceAll('-', '年') }}月加入中国共产主义青年团，现任{{ member.college || '软件学院' }}{{
              member.studentClass }}班{{ member.currentPosition || '体育委员'
            }}。通过同本人谈话、查阅有关档案材料，找有关单位和人员了解，该同志历史清白，其家庭主要成员以及主要社会关系清楚，未发现政治历史问题，具体情况如下：
          </p>
          <p class="text-center text-gray-400 my-8 py-4 border-y border-gray-200">
            [ 此处省略正文约800字 ]
          </p>

          <p class="indent-8 mt-4">
            {{ member.memberName }}同志政治审查合格，根据其现实表现，该同志已基本具备共产党员条件，我支部拟在近期发展{{ member.memberName }}同志为中共预备党员，请上级组织审查。
          </p>

          <div class="flex flex-col items-end mt-24">
            <div>{{ member.currentPartyBranch || '东北大学软件学院本科生第四党支部' }}</div>
            <div class="mt-4">党支部书记：{{ member.comprehensiveReview?.committeeSignature }}</div>
            <div class="mt-4">{{ formatSignatureDate(member.comprehensiveReview?.signatureDate) }}</div>
          </div>
        </div>
      </n-space>
    </div>
    <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
         <n-anchor :bound="500">
          <n-anchor-link title="政审综合材料" href="#comprehensive-review-page" />
        </n-anchor>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { NSpace, NAnchor, NAnchorLink, NAffix } from 'naive-ui';

const documentContainer = ref(null);

defineProps({
  member: {
    type: Object,
    required: true,
    default: () => ({ comprehensiveReview: {} })
  }
});

const formatSignatureDate = (dateStr) => {
  if (!dateStr) return '    年   月   日';
  const date = new Date(dateStr);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${year}年 ${month}月 ${day}日`;
};
</script>